<template>
  <div>
    <div class="top-panel__box">
      <el-row style="margin-bottom: 30px;">
        <el-col>
          <el-form :model="dataForm" ref="dataForm" inline size="small" onsubmit="return false">
            <el-form-item>
              <el-input placeholder="海报名称" v-model="dataForm.styleName" maxlength="30" clearable />
            </el-form-item>
            <el-form-item>
              <el-select placeholder="渠道标识" v-model="dataForm.channelCode" clearable collapse-tags>
                <el-option v-for="(value, key) in dicts['recommend_style_channel'].childMap" :key="key" :label="value" :value="key" />
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px">
              <el-select placeholder="产品类型" v-model="dataForm.productId" clearable collapse-tags>
                <el-option v-for="(value, key) in dicts['product_type'].childMap" :key="key" :label="value" :value="key" />
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px">
              <el-select placeholder="状态" v-model="dataForm.styleStatus" clearable collapse-tags>
                <el-option v-for="(item, key) in CUR_SATUS" :key="key" :label="item" :value="key" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList(1)">
                <fa-icon class="fa-search" />查询</el-button>
              <reset-button :dataForm.sync="dataForm" :fixedData="{pageNum: 1, pageSize: 10}" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="top-panel__box">
      <el-row>
        <el-col>
          <el-form onsubmit="return false">
            <el-form-item>
              <el-button type="primary" @click="addPoster()">
                <fa-icon class="fa-upload" />新增海报
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-row class="table-top">
      <div class="poster-list" v-loading="tableLoading">
        <div class="poster-item" v-for="(item, index) in dataList" :key="index">
          <div class="poster-img">
            <div class="stop-mask" v-if="item.styleStatus === 'CLOSE'">
              <div class="mask"></div>
              <div class="stop-text">
                <span>停用</span>
              </div>
            </div>
            <el-image class="poster-img" :src="item.styleImg" :preview-src-list="[item.styleImg]"></el-image>
          </div>
          <div class="content">
            <div class="name">{{item.styleName}}</div>
            <div class="product-type">{{dicts['product_type'].childMap[item.productType]}}</div>
          </div>
          <div class="channel">{{dicts['recommend_style_channel'].childMap[item.channelCode]}}</div>
          <div class="btn-group">
            <div class="btn" @click="editPoster(item)" v-show="item.styleStatus === 'CLOSE'">编辑</div>
            <div class="btn" @click="changeStyleStatus(item)">{{ item.styleStatus === 'CLOSE' ? '启用' : '停用'}}</div>
            <div class="btn" @click="deletePoster(item)" v-show="item.styleStatus === 'CLOSE'">删除</div>
          </div>
        </div>
      </div>
      <el-row class="pagination-top">
        <pagination :pageNum.sync="dataForm.pageNum" :pageSizes="pageSizes" :curSizes.sync="dataForm.pageSize" :total="total" @getList="getList" />
      </el-row>
    </el-row>
    <!--新增/编辑海报-->
    <el-dialog :title="editData.recommendStyleId ? '编辑海报' : '新增海报'" :visible.sync="posterDialog" width="34%" :close-on-click-modal="false">
      <add-or-edit-poster v-if="posterDialog" :editData="editData" @updateSuccess="updateData" @close="close" />
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { CUR_SATUS } from './js/contant.js'
import api from './api'
import { CONSTANT_OBJ } from '@/utils/constant'
import AddOrEditPoster from './components/AddOrEditPoster'
import { common } from '@/utils/common'
export default {
  components: { AddOrEditPoster },
  props: { flag: String },
  data () {
    return {
      tableLoading: false,
      assignDialog: false,
      posterDialog: false,
      CUR_SATUS,
      editData: {},
      dataForm: {
        styleName: '',
        channelCode: '',
        productId: '',
        styleStatus: '',
        pageNum: 0,
        pageSize: 8
      },
      total: 0,
      slectedList: [],
      selectedIds: [],
      dataList: [],
      srcList: [],
      pageSizes: [8, 16, 32]
    }
  },
  mounted () {
    this.$store.dispatch('common/queryProductData', { pageNum: 1, pageSize: 99 })
    this.getList()
  },
  methods: {
    // 列表查询
    getList (val) {
      this.dataForm.pageNum = val || this.dataForm.pageNum
      this.tableLoading = true
      api.postQueryByCondition({ ...this.dataForm }).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.dataList = data.list || []
          this.total = parseInt(data.total) || 0
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    // 选中
    handleSelectionChange (val) {
      this.slectedList = val
      this.selectedIds = []
      this.slectedList.forEach(item => {
        this.selectedIds.push(item.caseId)
      })
    },
    // 新增
    addPoster () {
      this.editData = {}
      this.posterDialog = true
    },
    // 编辑
    editPoster (posterItem) {
      this.editData = { ...this.editData, ...posterItem }
      this.posterDialog = true
    },
    // 删除
    delete (posterItem) {
      this.$confirm('<div style="padding-left: 50px"><strong style="font-size: 16px">是否确定删除此海报模板？</strong><div>删除后将无法修复，请慎重操作</div></div>', '确认提示', {
        dangerouslyUseHTMLString: true
      }).then(() => {
        api.delete(posterItem.recommendStyleId).then(res => {
          this.successFn(res)
        })
      })
    },
    // 更新数据
    updateData (data) {
      this.posterDialog = false
      this.getList(0)
    },
    // 修改状态
    changeStyleStatus (posterItem) {
      if (posterItem.styleStatus === 'OPEN') {
        this.$confirm('<div style="padding-left: 50px"><strong style="font-size: 16px">是否确定停用此海报模板？</strong><div>停用后APP上将无展示且使用该海报模板</div></div>', '确认提示', {
          dangerouslyUseHTMLString: true
        }).then(() => {
          api.postClose(posterItem.recommendStyleId).then(res => {
            this.successFn(res)
          })
        })
      } else {
        this.$confirm('<div style="padding-left: 50px"><strong style="font-size: 16px">是否确定启用此海报模板？</strong></div>', '确认提示', {
          dangerouslyUseHTMLString: true
        }).then(() => {
          api.postOpen(posterItem.recommendStyleId).then(res => {
            this.successFn(res)
          })
        })
      }
    },
    successFn (res) {
      const { responseCode, responseMsg: message } = res
      if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
        this.$message({
          message,
          type: 'success'
        })
        this.getList(0)
      }
    },
    close () {
      this.posterDialog = false
    },
    deletePoster (item) {
      common.confirmFn(`<div style="padding-left: 20px"><strong style="font-size: 16px">删除后将无法修复，请慎重操作</strong></div>`, '是否确定删除此海报模板？').then(res => {
        if (res) {
          api.deletePoster(item.recommendStyleId).then(res => {
            const { responseCode } = res
            if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
              this.getList(0)
              console.log('删除成功')
            }
          })
        }
      })
    }
  },
  computed: {
    ...mapState({
      products: state => state.common.products,
      dicts: state => state.common.dicts
    })
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/css/global.less";
.table-top {
  box-sizing: border-box;
  padding: 50px 20px;
  background: #fff;
}
.poster-list {
  display: flex;
  background: #ffffff;
  flex-wrap: wrap;
  .poster-item {
    width: 25%;
    margin-bottom: 15px;
    .poster-img {
      width: 375px / 1.5;
      height: 667px / 1.5;
      position: relative;
      .stop-mask{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
        .mask{
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.7;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 10;
        }
        .stop-text{
          width: 100%;
          box-sizing: border-box;
          padding: 5px 0;
          background: #fff;
          position: relative;
          z-index: 20;
          display: flex;
          justify-content: center;
          align-items: center;
          span{
            opacity: 0.35;
            font-size: 30px;
          }
        }
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      width: 375px / 1.5;
      .name {
        width: 150px;
        font-size: 16px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .product-type {
        font-size: 14px;
        font-weight: 400;
      }
    }
    .channel {
      font-size: 14px;
      width: 375px / 1.5;
      word-wrap: break-word;
      word-break: break-all;
    }
    .btn-group {
      display: flex;
      .btn {
        font-size: 14px;
        color: #0079fe;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  &::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
  }
}
</style>
